<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>THE LAST DAY OF 2021</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        position: relative;
      }
      #cover {
        width: 100%;
        height: 100%;
        background-color: white;
        position: absolute;
        z-index: 1;
      }
      #view {
        display: block;
        position: absolute;
        background-color: rgba(248, 248, 144, 0.747);
        width: 100%;
        height: 100%;
      }
      .content {
        position: absolute;
        top: 300px;
        left:100px;
      }
      .open {
        position: absolute;
        width: 80px;
        height:50px;
        border-radius: 10px;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 24px;
        top: 600px;
        left:100px;
      
      }
    </style>
  </head>
  <body>
    <!-- <div id="cover">

      <div class="open">OPEN</div>
    </div> -->
    <canvas id="view" width="500" height="1000"></canvas>

    <script>
      const canvas = document.getElementById("view");
      const ctx = canvas.getContext("2d");

      let radianCal = 0; // 初始弧度

      let radianAdd = Math.PI / 180;

      let size = 12;

      let x, y;

      ctx.beginPath();

      ctx.shadowBlur = 5;
      ctx.shadowColor = "#eb3b5a";
      ctx.strokeColor = "#eb3b5a";
      ctx.save();
      ctx.translate(250, 200);

      ctx.moveTo(calX(radianCal), calY(radianCal));

      async function draw() {
        if (radianCal <= 2 * Math.PI) {
          radianCal += radianAdd;
          x = calX(radianCal);
          y = calY(radianCal);
          ctx.lineTo(x, y);

          ctx.stroke();
        } else {
          clearInterval(timmer);
          for (let i = 0; i < 20; i++) {
            await sleep(20)
          
            let opacity = 1 * (i/20)
            
            ctx.fillStyle = "rgba(255,240,245,"+opacity+")";
            ctx.fill(); //实心填充
          }
         
          ctx.restore();
          
          ctx.translate(0, 0);
          ctx.shadowBlur = 2;
          ctx.font = "18px 宋体";
          ctx.fillStyle = "#fee600";
          ctx.fillText("TO BB HJW", 90, 140);
          ctx.font = "14px 宋体";
          ctx.fillStyle = "#90d7ec";
          ctx.fillText("THE LAST DAY OF 2021", 100, 170);
          ctx.font = "14px 宋体";
          ctx.fillStyle = "#2a5caa";
          ctx.fillText("AS ALWAYS", 120, 200);
          ctx.font = "24px 宋体";
          ctx.fillStyle = "white";
          ctx.fillText("I LOVE YOU", 200, 240);
          ctx.font = "15px 宋体";
          ctx.fillStyle = "#ea66a6";
          ctx.fillText("FROM LWJ", 220, 280);
        }
      }
      function calX(p) {
        return size * 16 * Math.pow(Math.sin(p), 3);
      }

      function calY(q) {
        return -size * (13 * Math.cos(q) - 5 * Math.cos(2 * q) - 2 * Math.cos(3 * q) - Math.cos(4 * q));
      }

      function sleep(ms){
        return new Promise(resolve => setTimeout(resolve, ms))
      }
      var timmer = setInterval(draw, 10);
    </script>
  </body>
</html>
